<template>
  <div style="width: 100%; height: 100%" v-loading="loading">
    <el-dialog
      title="添加商户"
      :close-on-click-modal="false"
      :visible.sync="merchantDialog"
      width="45%"
      @close="closeHandler"
    >
      <el-form
        :model="merchant"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="门店名称" prop="storeName">
          <el-input v-model="merchant.storeName"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="merchant.mobile"></el-input>
        </el-form-item>
        <el-form-item label="门店地址">
          <el-input v-model="merchant.storeAddr"></el-input>
        </el-form-item>
        <!-- <el-form-item label="门店星级" style="text-align:left">
           <el-input-number  v-model="merchant.storeStar" :precision="2" :step="0.1" :max="10"></el-input-number>
        </el-form-item> -->
        <el-form-item label="门店负责人">
          <el-input v-model="merchant.storeLead"></el-input>
        </el-form-item>
        <el-form-item label="门店电话">
          <el-input v-model="merchant.storeTel"></el-input>
        </el-form-item>
        <el-form-item label="门店类型">
          <!-- <el-select v-model="merchant.type" placeholder="设置门店类型" >
            <el-option label="商品" :value="1" key="1"></el-option>
            <el-option label="服务" :value="2" key="2"></el-option>

          </el-select> -->

          <el-radio-group v-model="merchant.type">
            <el-radio :label="1">商品</el-radio>
            <el-radio :label="2">服务</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="门店营业时间" class="flex flex-start upload-box">
          <el-time-picker
            is-range
            v-model="timeRangeList"
            format="HH:mm"
            value-format="HH:mm"
            :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '23:59',
            }"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
          <!-- <el-input v-model="merchant.openingHours" ></el-input> -->
        </el-form-item>
        <el-form-item label="门店营业执照" class="flex flex-start upload-box">
          <qiniu-upload
            :imageUrl="merchant.certificate"
            @changeImage="changeCertificateIcon"
          ></qiniu-upload>
          <!-- <el-input v-model="merchant.certificate" ></el-input> -->
        </el-form-item>
        <el-form-item label="门店头图" class="flex flex-start upload-box">
          <qiniu-upload
            :imageUrl="merchant.storePhoto"
            @changeImage="changeIcon"
          ></qiniu-upload>
        </el-form-item>
        <el-form-item label="室内照">
          <QiniuUploadMultiple
            :fileList="indoorPhoto"
            @changeImage="changeIcons"
          ></QiniuUploadMultiple>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="merchant.status" placeholder="设置门店类型">
            <el-option label="正常营业" :value="1" :key="1"></el-option>
            <el-option label="门店休息" :value="2" :key="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeHandler()">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { storeSaveUrl } from "@/utils/common";
import QiniuUploadMultiple from "../qiniu/upload-multiple";
import QiniuUpload from "../qiniu/upload";

export default {
  props: {
    merchantDialog: {
      type: Boolean,
      default: false,
    },
    popMerchant: {
      type: Object,
      default: null,
    },
  },
  watch: {
    popMerchant(n, o) {
      console.log(o);
      this.merchant = n;
      this.indoorPhoto = [];
      if (this.merchant.indoorPhoto && this.merchant.indoorPhoto.indexOf(",")) {
        const images = this.merchant.indoorPhoto.split(",");
        images.forEach((item, index) => {
          console.log(index);
          this.indoorPhoto.push({ name: item, url: item });
        });
      }
      if (
        this.merchant.openingHours &&
        this.merchant.openingHours.indexOf(",") > 0
      ) {
        this.timeRangeList = this.merchant.openingHours.split(",");
      }
    },
  },
  components: { QiniuUpload, QiniuUploadMultiple },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      merchant: {
        storeName: "",
        mobile: "",
        type: 1,
        status: 1,
        storeStar: 0,
      },
      storePhoto: "",
      indoorPhoto: [],
      timeRangeList: "",
      shops: [],
      rules: {
        mobile: { required: true, message: "请输入电话", trigger: "blur" },
        storeName: {
          required: true,
          message: "请输入商户名称",
          trigger: "blur",
        },
      },
    };
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveMerchant();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changeIcon(image) {
      this.merchant.storePhoto = image;
    },
    changeCertificateIcon(image) {
      this.merchant.certificate = image;
    },
    changeIcons(image) {
      this.indoorPhoto = image;
    },
    saveMerchant() {
      this.loading = true;
      this.merchant.openingHours = this.timeRangeList.join(",");
      let indoorPhotos = [];
      this.indoorPhoto.forEach((item, index) => {
        console.log(index);
        indoorPhotos.push(item.url);
      });
      this.merchant.indoorPhoto = indoorPhotos.join(",");
      // this.merchant.storePhoto = this.storePhoto

      this.axios
        .post(storeSaveUrl, this.merchant)
        .then((res) => {
          if (res.data.status == "SUCCESS") {
            this.loading = false;
            this.merchant = {};
            this.$emit("close");
            this.$message.success(res.data.result);
          } else {
            this.loading = false;
            this.$message.error(res.data.result);
          }
        })
        .catch((response) => {
          this.loading = false;
          console.log("response - " + response);
          this.$message.error("数据保存异常失败");
        });
    },
    closeHandler: function () {
      this.dialogVisible = false;
      this.user = {};
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../style/dialog.less";
</style>
